<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!--1.先进行布局，放置一个复选框、一个下拉列表框、两个文本框、一个展示结果的 div
            2.把每个表单元素的对应数据展示出来，用于过程性检测，后期删除
            3.把下拉框和展示结果的 div 进行隐藏和显示的操作
            4.获取文本框中的数据，根据是否会员以及等级来决定折扣比例，进行计算。
              可以使用计算属性，侦听器等来实现-->
        <!-- 复选框 - 是否为会员 -->
        <label>
            <input type="checkbox" v-model="hy"> 是否会员
        </label>
        <select v-model="dj" v-if="hy">
            <option value="1" selected>普通会员</option>
            <option value="2">白银会员</option>
            <option value="3">黄金会员</option>
            <option value="4">钻石会员</option>
        </select>
<br>
        <label>购买数量: </label>
        <input type="number" v-model.number="sl" min="1" step="1"> 件<br>

        <label>消费金额: </label>
        <input type="number" v-model.number="mj" min="0" step="0.01"> 元<br>

        <label v-if="hy">尊敬的{{getdj()}}，</label>
        您的购买数量是{{ sl || 0 }}件，
        单价是{{ mj || 0 }}元
        <label v-if="hy">，折扣是{{ jszk * 10 }}折</label>，
        总价是{{this.mj*this.sl*this.jszk}}
    </div>
</body>
</html>
<script>
    const { createApp } = Vue;
    
    createApp({
        data() {
            return {
                hy: false,
                dj: '1',
                mj: 0,
                sl: 1 
            }
        },
        methods: {
            getdj() {
                const levels = {
                    '1': '普通会员',
                    '2': '白银会员',
                    '3': '黄金会员',
                    '4': '钻石会员'
                };
                return levels[this.dj] || '普通会员';
            }
        },
        computed: {
            jszk() {
                if (!this.hy) return 1;
                const zk = {
                    '1': 0.95,
                    '2': 0.9,
                    '3': 0.85,
                    '4': 0.8
                };
                return zk[this.dj] || 0.95;
            },
        }
    }).mount('#app');
</script>